<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">退款申请</block>
		</cu-custom>
		<view class="padding">
			<view class="padding-sm radius-xl bg-white margin-bottom-sm">
				<view class="title margin-bottom-xs">
					<text class="cuIcon-titles themeColor"></text>订单信息
				</view>
				<view class="pro-item">
					<view class="project padding-tb-xs" v-for="(item, index) in info.projects" :key="index">
						<image :src="item.thumb" mode="aspectFill" class="image"></image>
						<view class="proBox padding-left-sm">
							<view class="nameandtime">
								<view class="name text-bold text-black">{{ item.service_title }}</view>
								<view class="time text-gray text-sm" v-if="item.duration">{{ item.duration }}分钟</view>
							</view>
							<view class="desc text-sm text-gray margin-bottom-sm">{{ item.tips }}</view>
							<view class="cost">
								<view class="text-red text-bold">￥{{ item.price }}</view>
								<view class="num text-gray">x{{ item.num }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="orderinfo padding-xs text-sm">
					<view class="crow margin-bottom-xs">
						<view class="name">服务技师</view>
						<view class="content">
							<view class="cu-avatar sm round margin-left"
								:style="{ backgroundImage: 'url(' + info.technician_headimg + ')' }"></view>
							<text class="padding-left-xs">{{ info.technician_nickname }}</text>
						</view>
					</view>
					<view class="crow margin-bottom-xs">
						<view class="name">订单编号</view>
						<view class="content">
							<text>{{ info.trade }}</text>
						</view>
					</view>
					<view class="crow margin-bottom-xs" v-if="info.travel_price">
						<view class="name">出行费用</view>
						<view class="content">
							<text class="text-red text-bold">¥ {{ info.travel_price }}</text>
						</view>
					</view>
					<view class="crow">
						<view class="name">支付金额</view>
						<view class="content">
							<text class="text-red text-bold">¥ {{ info.price }}</text>
						</view>
					</view>
				</view>
			</view>
			<x-refund-tips />

			<!-- 退款原因 -->
			<view class="apply_reason padding-sm bg-white radius-xl margin-bottom">
				<view class="title margin-bottom-xs">
					<text class="cuIcon-titles themeColor"></text>退款原因
				</view>
				<view>
					<textarea maxlength="255" placeholder="在此输入备注信息" v-model="form.refund_message"
						class="textarea"></textarea>
				</view>
			</view>

			<view class="submit">
				<view class="flex flex-direction">
					<button class="cu-btn china-btn-bg lg round" @click="submit()">确认提交</button>
				</view>
			</view>
		</view>
		<loading v-if="pageLoading" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageLoading: false,
			form: {
				trade: '',
				refund_message: ''
			},
			info: {}
		};
	},
	onLoad(options) {
		this.getOrderInfo(options.trade);
	},
	methods: {
		getOrderInfo(trade) {
			this.pageLoading = true;
			this.$utils.$api.Orders.info(trade).then(data => {
				this.info = data;
				this.form.trade = data.trade;
			}).catch(err => {
				uni.showModal({
					title: '提示',
					content: err.msg,
					showCancel: false,
					success: () => {
						this.$utils.$page.back();
					}
				})
			}).finally(() => {
				this.pageLoading = false;
			})
		},
		submit() {
			if (!this.form.refund_message) {
				return this.$utils.$message.error('请输入退款原因');
			}
			this.pageLoading = true;
			this.$utils.$api.Orders.refund(this.form).then((res) => {
				uni.$emit('UPDATE::ORDER');
				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
					success: () => {
						this.$utils.$page.back();
					}
				})
			}).catch(err => {
				this.$utils.$message.error(err.msg);
			}).finally(() => {
				this.pageLoading = false;
			})
		}
	}
}
</script>

<style lang="less" scoped>
.pro-item {

	// background-color: #fffbf5;
	.project {
		display: flex;

		.image {
			width: 130upx;
			height: 130upx;
			border-radius: 20upx;
		}

		.proBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.nameandtime,
			.cost {
				display: flex;
				justify-content: space-between;
			}
		}
	}
}

.orderinfo {
	.crow {
		justify-content: space-between
	}
}

.user-notice {
	.list {
		.item {
			display: flex;
			align-items: center;

			image {
				width: 40upx;
				height: 40upx;
			}

			.content {
				.desc {
					// font-size: 26upx;
				}
			}
		}
	}
}

.apply_reason {
	.textarea {
		width: 100%;
		height: 150upx;
		font-size: 26upx;
	}
}
</style>
